<template>
  <div>
    <van-nav-bar
      title="个人信息"
      left-arrow
      class="tobInformation"
      @click-left="onClickLeft"
    />
    <van-cell center title="头像" is-link @click="$refs.file.click()">
      <template #default>
        <input type="file" hidden ref="file" @change="setImg" />
        <van-image
          round
          fit="cover"
          width="1rem"
          height="1rem"
          :src="info.photo"
        />
      </template>
    </van-cell>
    <van-cell title="昵称" is-link :value="info.name" @click="setName" />
    <van-cell
      title="性别"
      is-link
      :value="info.gender === 1 ? '女' : '男'"
      @click="setSex(info.gender)"
    />
    <van-cell
      title="生日"
      is-link
      :value="info.birthday"
      @click="setBirthday(info.birthday)"
    />
    <van-popup
      v-if="show"
      v-model="show"
      position="bottom"
      :style="{ height: num }"
      :class="flag ? 'popup1' : 'popup2'"
    >
      <Img v-if="flag" :img="name" @setShow="setShow" @setData="setData"></Img>
      <Name
        v-else-if="num === '100%'"
        :name="name"
        @setShow="setShow"
        @setData="setData"
      ></Name>
      <Sex
        v-else-if="num === '40%'"
        :sex="name"
        @setShow="setShow"
        @setData="setData"
      ></Sex>
      <Birthday
        v-else
        :birthday="name"
        @setShow="setShow"
        @setData="setData"
      ></Birthday>
    </van-popup>
  </div>
</template>

<script>
import { info } from '@/api/info.js'
import Img from '@/components/img.vue'
import Name from '@/components/name.vue'
import Sex from '@/components/sex.vue'
import Birthday from '@/components/birthday.vue'
export default {
  components: {
    Img,
    Name,
    Sex,
    Birthday
  },
  name: 'information',
  data () {
    return {
      info: {},
      show: false,
      num: '',
      name: '',
      flag: false,
      img: null
    }
  },
  methods: {
    setShow () {
      this.flag = false
      this.show = false
      // 这里需要把input表单的value清空，否则在选择同一张图片时不会触发change事件
      this.$refs.file.value = null
    },
    setData () {
      this.getInfo()
      this.flag = false
      this.show = false
      this.$refs.file.value = null
    },
    onClickLeft () {
      this.$router.back()
    },
    setImg () {
      this.num = '100%'
      this.flag = true
      this.name = window.URL.createObjectURL(this.$refs.file.files[0])
      this.show = true
    },
    setName () {
      this.name = this.info.name
      this.num = '100%'
      this.show = true
    },
    setSex (sex) {
      this.name = sex
      this.num = '40%'
      this.show = true
    },
    setBirthday (birthday) {
      this.name = birthday
      this.num = '50%'
      this.show = true
    },
    async getInfo () {
      const {
        data: { data }
      } = await info()
      this.info = data
    }
  },
  created () {
    this.getInfo()
  }
}
</script>

<style lang="less" scoped>
.tobInformation {
  background-color: rgb(46, 139, 245);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
}
.popup1 {
  background-color: #000;
}
.popup2 {
  background-color: rgb(230, 230, 230);
}
</style>
